<template>
  <div>
    <!--    <el-header>告警信息同步</el-header>-->
    <el-container v-loading="loading"
                  element-loading-text="拼命加载中"
                  element-loading-spinner="el-icon-loading"
                  element-loading-background="rgba(0, 0, 0, 0.8)">
      <el-form label-width="100px">
        <el-form-item label="网元名称">
          <el-input v-model="cache" readonly></el-input>
        </el-form-item>

        <el-progress
            :text-inside="true"
            :stroke-width="26"
            :percentage="percentage"
            :status="status"
            style="margin-left: 25px">
        </el-progress>

        <el-form-item>
          <el-button type="primary" @click="syncInfo" style="margin-top: 10px;margin-left: 15px" :disabled="btn">开始同步</el-button>
          <el-button  @click="cancelBtn" style="margin-top: 10px;margin-left: 15px">取消</el-button>
        </el-form-item>

      </el-form>

      <el-progress type="circle"
                   :percentage="percentage"
                   :status="status"
                   style="float: left;margin-bottom: 30px"
                   v-show="false"></el-progress>
    </el-container>

    <el-dialog :visible.sync="innerVisible" width="16%" :modal="false">
      <el-result icon="success" title="同步完成" subTitle="告警信息已同步完成">
        <template slot="extra">
          <el-button type="primary" size="medium" @click="innerVisible = false">返回</el-button>
        </template>
      </el-result>
    </el-dialog>


    <el-button v-show="loading" size="mini" type="danger" style="float: right;margin-bottom: 5px"
               @click="loading = false">取消
    </el-button>
  </div>
</template>

<script>
export default {
  name: "TipWindows",
  data() {
    return {
      loading: false,
      innerVisible: false,
      percentage: 0,
      status: '',
      btn:false,

      cache: '',
      nodeLevel: '',

      id: '',
    }
  },
  methods: {
    syncInfo() {
      if (this.percentage >= 100) {
        this.percentage = 0;
        clearInterval(this.id)
      }
      this.id = setInterval(() => {
        this.percentage++;
      }, 50)

      // this.loading = true;

      setTimeout(function () {          // 设定定时器，超时5S后自动关闭遮罩层，避免请求失败时，遮罩层一直存在的问题
        this.percentage++;                     // 关闭遮罩层
      }, 5000)

    },
    cancelBtn(){
      console.log('取消函数执行了')
      clearInterval(this.id)
      this.percentage = 0;
      this.btn = false;
    }
  },
  watch: {
    percentage: {
      immediate: true, //初始化时让handler调用一下
      //handler什么时候调用？当isHot发生改变时。
      handler(newValue, oldValue) {
        console.log('进度被修改了', newValue, oldValue)
        if (this.percentage >= 100) {
          this.status = 'success';
          clearInterval(this.id);
          this.innerVisible = true;
          this.btn = false;
        }
        if (this.percentage >= 50 && this.percentage < 100) {
          this.status = ''
          this.btn = true;
        }
        if (this.percentage <= 50&&this.percentage>0) {
          this.btn = true;
          this.status = 'warning'
        }
      }
    }
  },
  mounted() {
    this.$bus.$on("node-name", (data) => {
      this.cache = data;
    });
  }
}
</script>

<style scoped>

</style>